<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 19</title>
  <script src="js/task19.js"></script>
  <style>
  .box {
    position: relative;
    height: 120px;
    margin-top: 20px;
  }

  .box .items {
    position:absolute;
    bottom: 0;
    width: 20px;
    margin-left: 1px;
    font-size: 20px;
    font-weight: bold;
    background-color: #f00;
  }
  </style>
</head>

<body>
  <fieldset>
    <legend>说明</legend>
    <dl>
      <dt>任务目的</dt>
      <dd>学习与实践JavaScript的基本语法、语言特性</dd>
      <dd>练习使用JavaScript实现简单的排序算法</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd>基于任务18</dd>
      <dd>限制输入的数字在10-100</dd>
      <dd>队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示</dd>
      <dd>队列展现方式变化<a target="_blank" href="http://7xrp04.com1.z0.glb.clouddn.com/task_2_19_1.jpg">如图</a>，直接用高度表示数字大小</dd>
      <dd>实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料</dd>
    </dl>
  </fieldset>
  <input id="input" type="number" min="10" max="100" />
  <button id="leftin">左侧入</button>
  <button id="rightin">右侧入</button>
  <button id="leftout">左侧出</button>
  <button id="rightout">右侧出</button>
  <button id="osc">升序</button>
  <button id="dec">降序</button>

  <div id="box" class="box">
  </div>
</body>

</html>
